<template>
	<view class="login">
		<image class="logo" src="/static/img/Logo_Login.jpg"></image>
		<view class="SystermTitle01">WelCome</view>
		<view class="SystermTitle02">JD.com</view>
		<form class="login_form" @submit="formSubmit">
			<view class="login_form_item">
				<view class="title">用户名</view><!-- student --><!-- Password001 -->
				<input name="username"  placeholder="要求6-20位字母、数字或者下划线" v-model="username">
			</view>
			<view class="login_form_item">
				<view class="title">密码</view><!-- Password001 -->
				<input name="password" type="password" placeholder="要求包含6-20位大小写字母和数字" v-model="password">
			</view>
			<view class="login_form_item">
				<button form-type="submit">登录</button>
			</view>
			<view class="goToRegister">
				<view @click="goToRegisterClick()">注册</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				password: ""
			}
		},
		onLoad() {

		},
		methods: {
			goToRegisterClick() {
				uni.navigateTo({
					url: '/pages/logup/logup'
				});
			},

			/**
			 * 用户名校验
			 */
			validateUsername() {
				// 非空校验
				if (!this.username) {
					return false;
				}

				// 长度校验
				if (this.username.length < 6 || this.username.length > 20) {
					return false;
				}

				// 格式校验，这里使用正则表达式进行判断，可以根据需求进行修改
				const regex = /^[a-zA-Z0-9_]+$/; // 只允许字母、数字和下划线
				if (!regex.test(this.username)) {
					return false;
				}

				return true;
			},
			/**
			 * 密码校验
			 */
			validatePassword() {
				// 非空校验
				if (!this.password) {
					return false;
				}

				// 长度校验
				if (this.password.length < 6 || this.password.length > 20) {
					return false;
				}

				// 格式校验，这里使用正则表达式进行判断，可以根据需求进行修改
				const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+$/; // 格式校验，要求包含大小写字母和数字
				if (!regex.test(this.password)) {
					return false;
				}

				return true;
			},
			showAlert(message) {
				uni.showToast({
					title: message,
					icon: "none"
				});
			},
			
			
			
			
			
			
			
			formSubmit(formData) {
				console.log(formData.detail.value) //表单提交的数据
				// 校验用户名和密码字段
				if (!this.validateUsername()) {
					this.showAlert("请输入有效的用户名");
					return;
				}

				if (!this.validatePassword()) {
					this.showAlert("请输入有效的密码");
					return;
				}
				uni.showLoading({ //显示 Loading 提示框
					title: '登录中...',
					mask: true, // 在整个页面上添加一个半透明的遮罩层，并且
					// 禁用用户的交互操作，防止用户在操作完成前误触其他按钮，从而导致错误的操作
				})
				uni.request({
					// 发送到后端url中的login
					url: 'http://127.0.0.1:8002/login/',
					method: "POST",
					data: formData.detail.value,
					success(res) {
						uni.hideLoading() //隐藏 Loading 提示框
						uni.showToast({
							title: res.data.message,
							icon: res.data.status, //可以设置为 none、success、loading 三种类型中的一种。
							duration: 2000,
							mask: true,
						})
						
						// <!-- student --><!-- Password001 -->

						//用于将数据(用户名)保存到本地存储中的函数
						uni.setStorageSync('loginUser', formData.detail.value)
						console.log("LoginResponse:",res.data)
						uni.setStorageSync('LoginResponse', res.data)

						if (res.data.code == 2000) {
							// 登录成功后1.5s跳转
							let currentPath = uni.getStorageSync('current-path')
							console.log('currentPath1:' + currentPath)
							if (!currentPath || currentPath == '/pages/index/index' || currentPath ==
								'/pages/mine/mine') {
								currentPath = '/pages/index/index'
								console.log('currentPath2:' + currentPath)
								setTimeout(() => {
									uni.switchTab({
										url: currentPath
									});
								}, 1500)
							} else {
								setTimeout(() => {
									uni.redirectTo({
										url: currentPath
									});
								}, 1500)
							}
						}
					},
					fail() {
						uni.hideLoading() //隐藏 Loading 提示框
					}
				})
			},
		}
	}
</script>

<style>
	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.login .logo {
		height: 300rpx;
		width: 300rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		border-radius: 50%;
	}

	.login .SystermTitle01 {
		font-size: 60rpx;
		color: #ff3b19;
	}

	.login .SystermTitle02 {
		font-size: 36rpx;
		color: #ff8b3e;
	}


	.login .login_form_item {
		margin-top: 40rpx;
	}

	.login .login_form_item .title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.login .login_form_item input {
		height: 80rpx;
		width: 600rpx;
		border: none;
		border-radius: 40rpx;
		outline: none;
		/* 移除元素的默认轮廓线 */
		color: black;
		background-color: rgba(0, 0, 0, 0.05);
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.login .login_form_item button {
		background-color: #3385ff;
		color: #fff;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		border: none;
		outline: none;
		width: 100%;
		transition: background-color 1s;
		margin-top: 80rpx;
	}

	.login .login_form_item button:hover {
		background-color: #ccc13f;
	}

	.goToRegister {
		float: right;
		margin-top: 40rpx;
	}
</style>
